import React, { Component } from 'react'
import { IndexLink, Link } from 'react-router'
import './Header.scss'
import { Button, Menu, Icon } from 'antd';
export class Header extends Component {
  constructor(props) {
    super(props);
  }
  logOut() {
    wilddog.auth().signOut()
  }
  render() {
    let { auth } = this.props;
    // console.log(auth);
    return <div className="header">
      <div className="wrap">
        <h1>TMD Library </h1>
        <div className="header-nav">
          <IndexLink to='/' activeClassName='route--active'>
            Home
          </IndexLink>
          {' · '}
          <Link to='/wilddog' activeClassName='route--active'>
            留言管理
          </Link>
          <Link to='/tmdform' activeClassName='route--active'>
            自定义表单管理
          </Link>
          <Link to='/terms' activeClassName='route--active'>
            答题管理
          </Link>
          
        </div>
        <div className="header-user">
         {auth.status?
         (<div className='header-user-info'>
           <Button type="primary" size="large"  icon="user" >
           {auth.displayName}</Button>

           <Button  size="large"  style={{marginLeft:20}} onClick={this.logOut.bind(this)} >
            退出登陆</Button>
         </div>):
         <div className='header-user-info'>
          <Button onClick={this.props.LogIn} size="large" shape="circle" icon="user" />
         </div>
   }
        </div>
      </div>
    </div>
  }
}


export default Header
